<template>
  <div class="actor-item">
    <el-avatar fit="cover" shape="square" :size="70" :src="avatar"></el-avatar>
    <div>{{ name }}</div>
    <i class="el-icon-error" @click="deleteActor()"></i>
  </div>
</template>

<script>
export default {
  props: ["id", "name", "avatar"],
  data() {
    return {};
  },
  methods: {
    deleteActor() {
      this.$emit("delete");
      //发送http请求 实现删除业务
      // this.axios.post("/movie-actor/del", `id=${this.id}`).then((res) => {
      //   console.log(res);
      //   if (res.data.code == 200) {
      //     this.$message.success("删除成功");
      //     //通知父组件，已经删除 主动触发在父组件中见监听的deleteSuccess
      //     this.$emit("deleteSuccess");
      //   }
      // });
    },
  },
};
</script>

<style scoped>
.actor-item {
  display: inline-block;
  margin: 20px 20px 0px 0px;
  text-align: center;
  position: relative;
}
.actor-item i {
  position: absolute;
  font-size: 1.2em;
  top: -6px;
  right: -6px;
  display: none;
}
.actor-item:hover i {
  display: block;
}
.actor-item div {
  font-size: 0.9em;
}
.el-avatar >>> img {
  width: 100%;
}
</style>